<template>
    <a-modal
        v-model:visible="showModal"
        :title="'新增商品'"
        :width="987"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <div class="goods_list">
            <a-select ref="select" v-model:value="tableQuery.skuSpecsId" style="width: 120px" @change="handleCetegory">
                <a-select-option :value="item.id" v-for="(item, index) in cetegoryList" :key="index">{{
                    item.specsName
                }}</a-select-option>
            </a-select>
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :loading="loading"
                :row-key="setRowKey"
                :pagination="false"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :scroll="{ x: 900, y: 540 }"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>
            </a-table>
        </div>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';

import columns from './listColumns';
import listTable from './goodsTables';

// 表单校验规则
const initRules = (t: fn) => {
    return {
        pass: [{ required: true, message: t('yl.Password'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'user',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        details: {
            type: Array,
        },
    },
    setup(props, { emit }) {
        const { t } = useI18n();
        let { getskuGoodsSkuList, getCetegoryData, tableQuery, visible, selectedRowKeys } = listTable;
        const showModal = computed(() => props.visible);
        selectedRowKeys.value = props.details;
        onMounted(async () => {
            getskuGoodsSkuList(tableQuery);
            getCetegoryData({
                page: 0,
                size: 9999,
                sort: 'id,desc',
            });
        });
        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.skuCode;
        watch(
            () => props.details,
            (val) => {
                console.log(val);
                console.log('444');
            }
        );
        const onSubmit = () => {
            console.log(selectedRowKeys.value.length);
            if (selectedRowKeys.value.length) {
                emit('onSubmit', selectedRowKeys.value);
            } else {
                console.log('未选择');
            }
        };
        const handleCancle = () => {
            emit('cancle');
        };
        // 表单校验
        return {
            columns,
            setRowKey,
            showModal,
            t,
            ...listTable,
            onSubmit,
            handleCancle,
        };
    },
});
</script>

<style lang="scss" scoped>
.goods_head {
    @include flex;
    justify-content: space-between;
    padding-bottom: 20px;
    &-dept {
        flex-basis: 200px;
        min-width: 200px;
    }

    .goods_head_search {
        @include flex;
        .ant-btn {
            margin-left: 10px;
        }
    }
    .goods_head_btn {
        .ant-btn {
            margin-left: 10px;
        }
    }
}
</style>
